<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="/css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>

	<div class="place">
    <span>位置：</span>
    <ul class="placeul">
    <li><a href="#">首页</a></li>
    <li><a href="#">工具箱</a></li>
    </ul>
    </div>

    <form action="/role/updateRoleMenu" method="post">
        <input type="submit" value="修改" >
        <div class="formtitle"><span>所有角色</span></div>
        <div class="toolsli" >
            <ul class="toollist">
                <li th:each="role:${rolesList}">
                    <input type="radio" name="roleId" id="roleId" th:value="${role.id}" onclick="findRoleMenuByRid(this.value)">
                    <a href="#" ><img src="/images/i01.png" /></a>
                    <h2>[(${role.rolename})]</h2>
                </li>
            </ul>
            <span class="tooladd"><img src="/images/add.png" title="添加" /></span>
        </div>

        <div th:each="firstMenu:${firstMenuList}">
            <div class="formtitle"><input type="checkbox" th:id="@{'chk_'+${firstMenu.id}}" name="menuId" th:value="${firstMenu.id}">
                <span>[(${firstMenu.pername})]</span>
            </div>

            <div class="toolsli" >
                <ul class="toollist">
                    <li th:each="secondMenu:${secondMenuMap[firstMenu.id]}" style="display: inline-block;">
                        <input type="checkbox" name="menuId" th:id="@{'chk_'+${secondMenu.id}}" th:value="${secondMenu.id}">
                        <a href="#"><img src="/images/i01.png" /></a>
                        <span>[(${secondMenu.pername})]</span>
                    </li>
                </ul>
                <span class="tooladd"><img src="/images/add.png" title="添加" /></span>
            </div>

        </div>

    </form>

</body>
</html>
<script src="/js/jquery.js"></script>
<script>

    function findRoleMenuByRid(roleId){
        if (roleId==null){
            return ;
        }
        $("input[name=menuId]").attr("checked",false);
        $.ajax({
            //请求的url
            url: "/role/findRoleMenuByRid",
            //请求的参数
            data: {"roleId":roleId},
            //请求的方式
            type: "post",
            //预期的返回类型
            dataType: "json",
            //
            success: function (data) {
                if (data.status==200){
                    var menuList=data.obj;
                    for (let i = 0; i < menuList.length; i++) {
                        let menu=menuList[i];
                        $("#chk_"+menu.id).attr("checked","checked");
                    }
                }
            }
        })

    }

</script>